<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的</title>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/common.css"/>
    <style>
        body{
            height: 100vh;
            overflow: auto;
        }
        .topBox{
            /*width: 80%;*/
            /*height: 30%;*/
            padding: 10%;
            padding-bottom: 2%;
            margin: 0 auto;
            position: relative;
            /*background-color: rgb(7, 106, 255);*/
            background: url("/image/fenxiBackground.png") no-repeat fixed;
            background-size: cover;
        }
        .nameBox{
            position: absolute;
            top: 60%;
            left: 35%;
        }
        .listBox{
            margin:5%;
            height: auto;
            background: white;
            border-radius: 8px;
        }
        .menuItem{
            position: relative;
            width: 100%;
            padding: 4%;
            border-bottom: 0.5px #8c939d solid;
            border-radius: 10px;
        }
        .menuItem img{
            height: 4vh;
            width: 7vw;
        }
        .menuItem span{
            position: absolute;
            left: 15vw;
            top: 3vh;
            font-size: 0.9em;
            color: #8c939d;
        }
        el-drawer{
            width: 75%;
        }
        el-form-item input{
            width: auto;
        }
        .demo-drawer__footer{
            padding: 10%;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="topBox">
        <div style="width: 100%;text-align: center;font-size: 1em;color: white">个人中心</div>
        <el-avatar :size="80" :src="user.icon!==null ? user.icon:defaultIcon" style="margin-top: 15%;background: white"></el-avatar>
        <div class="nameBox">
            <font
                    style="
                    font-family:Microsoft YaHei,Arial,sans-serif;
                    font-style: normal;
                    color: white"
            >{{user.nickname!==null ? user.nickname:"未命名用户"}}</font>
        </div>
    </div>
<!--    功能列表 element-ui的抽屉很适合 -->
    <div class="listBox">
        <div class="menuItem" @click="dialog = true">
<!--            图标-->
            <img src="/image/menuItemziliao.png">
<!--            文本-->
            <span>个人资料</span>
<!--            箭头-->
            <img src="/image/menuItemjaintou.png" style="position: absolute;right: 1vw">
        </div>

        <div class="menuItem" @click="dialog2 = true">
            <!--            图标-->
            <img src="/image/menuItemlishijilu.png">
            <!--            文本-->
            <span>分析记录</span>
            <!--            箭头-->
            <img src="/image/menuItemjaintou.png" style="position: absolute;right: 1vw">
        </div>

        <div class="menuItem" @click="dialog3 = true">
            <!--            图标-->
            <img src="/image/menuItemshujv.png">
            <!--            文本-->
            <span>数据集</span>
            <!--            箭头-->
            <img src="/image/menuItemjaintou.png" style="position: absolute;right: 1vw">
        </div>
    </div>

    <div class="listBox" @click="logout()" style="height: auto;padding: 3%">
        <div style="color:#8c939d;size: 1em;text-align: center">退出登录</div>
    </div>

<!--    编辑用户信息弹出框-->
    <el-drawer
            title="编辑个人信息"
            :visible.sync="dialog"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            size="80%"
    >
        <div class="demo-drawer__content">
            <el-form :model="user">
                <el-form-item label="用户昵称" :label-width="formLabelWidth">
                    <el-input v-model="user.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="user.phoneNumber" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-select v-model="user.gender">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button type="primary" @click="updateForm" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
            </div>
        </div>
    </el-drawer>
<!--    用户历史记录-->
    <el-drawer
            title="历史分析记录"
            :visible.sync="dialog2"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            size="80%"
    >
        <div style="padding: 30px">
            <el-timeline :reverse=true>
                <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :timestamp="activity.timestamp">
                    {{activity.content}}
                </el-timeline-item>
            </el-timeline>
        </div>
    </el-drawer>
<!--    用户数据集-->
    <el-drawer
            title="用户数据集"
            :visible.sync="dialog3"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            size="80%"
    >
        <div style="padding: 30px">
            暂无~
        </div>
    </el-drawer>

</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el : "#app",
        mounted(){
            // console.log(this.user.icon.length) //0
            //获取用户信息
            this.pageInit();
        },
        methods : {
            pageInit(){
                let username = localStorage.getItem("user");
                axios({
                    method : 'get',
                    url : '/user?username='+username
                }).then((resp) => {
                    this.user = resp.data.data
                })
            },
            logout(){
                localStorage.removeItem("user");
                axios({
                    method : "get",
                    url : "/userLogout",
                });
                top.location.href = '/'
            },
            //编辑个人资料界面提交
            updateForm(){
                this.loading = true
                axios({
                    method : 'put',
                    url : '/user',
                    data : this.user,
                }).then((resp) => {
                    if (resp.data.code === 1) {
                        setTimeout(()=>{
                            this.pageInit();
                            this.loading = false;
                            this.$refs.drawer.closeDrawer()
                            this.$message({
                                message : resp.data.data,
                                type: 'success'
                            })
                        },1000)
                    }else {
                        this.$message({
                            message : resp.data.msg,
                            type: 'warning'
                        })
                    }
                })
            },
            cancelForm(){
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            }
        },
        data(){
            return {
                user: {
                    id : "",
                    username : "",
                    gender : "",
                    createTime : "",
                    status : "",
                    icon : "",
                    // password : "",
                    phoneNumber : "",
                    nickname : "",
                },
                formLabelWidth : '20vw',
                dialog: false,
                dialog2: false,
                dialog3: false,
                loading: false,
                defaultIcon: '/image/defaultUserIcon.png',
                userfiles: [

                ],
                //历史记录时间戳
                activities: [{
                    content: '分析1',
                    timestamp: '2018-04-15'
                }, {
                    content: '分析2',
                    timestamp: '2018-04-13'
                }, {
                    content: '分析3',
                    timestamp: '2018-04-11'
                }]
            }
        },
    })
</script>
</html>